<template> 
  <div>
  <el-dialog title="订单跟踪"
             :visible.sync="visible"
             :before-close="handleClose"
             width="40%">
    <el-steps v-if="logisticsList.length>0" direction="vertical" :active="6" finish-status="success" space="50px">
      <el-step  v-for="item in logisticsList"
                :key="item.logisticsDesc"
                :title="item.logisticsDesc"
                :description="item.recordDate"></el-step>
    </el-steps>
    <div v-if="logisticsList.length==0">暂无物流信息</div>
    <el-button type="primary" @click="addExpress" style="margin-top:20px;">新增一条物流信息</el-button>
  </el-dialog>
  <el-dialog  title="新增物流信息" :visible.sync="expressVisible" :before-close="handleClose" width="40%">
    <el-form :model="express" ref="productInfoForm" label-width="120px" >
      <el-form-item label="信息内容：" >
        <el-input v-model="express.exname"></el-input>
      </el-form-item>
       <el-form-item label="时间：">
        <!-- <el-input v-model="express.extime"></el-input> -->
        <el-date-picker
      v-model="express.extime"
      type="datetime"
      value-format="timestamp"
      placeholder="选择日期时间">
    </el-date-picker>
      </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="expressVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddExpressConfirm" :disabled="express.exname==''||express.extime==''">确 定</el-button>
      </span>
  </el-dialog>
  </div>
</template>
<script>
  const defaultLogisticsList=[
    {name: '订单已提交，等待付款',time:'2017-04-01 12:00:00 '},
    {name: '订单付款成功',time:'2017-04-01 12:00:00 '},
    {name: '在北京市进行下级地点扫描，等待付款',time:'2017-04-01 12:00:00 '},
    {name: '在分拨中心广东深圳公司进行卸车扫描，等待付款',time:'2017-04-01 12:00:00 '},
    {name: '在广东深圳公司进行发出扫描',time:'2017-04-01 12:00:00 '},
    {name: '到达目的地网点广东深圳公司，快件将很快进行派送',time:'2017-04-01 12:00:00 '},
    {name: '订单已签收，期待再次为您服务',time:'2017-04-01 12:00:00 '}
  ];
  import {
    getExpressList,setExpressInfo
  } from '@/api/order';
    import {formatDate} from '@/utils/date';
  export default {
    name:'LogisticsDialog',
    props: {
      aorderId:String,
      value: Boolean
    },
    computed:{
      visible: {
        get() {
          return this.value;
        },
        set(visible){
          this.value=visible;
        }
      }
    },
    data() {
      return {
        //aorderId:null,
        logisticsList:[],
        //logisticsList:Object.assign({},defaultLogisticsList)
        express:{
          id:null,
          exname:'',
          extime:""
        },
        expressVisible:false,//新增物流信息弹窗
      }
    },
    created(){
      this.getExpressListFun();
    },
    methods:{
      formatTime(time) {
        if (time == null || time === '') {
          return '';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      getExpressListFun(){
        getExpressList(this.aorderId).then(res=>{
          if(res.code ==200 && res.data && res.data.sendTime !=''){
            if(res.data.orderExtendLogistics && res.data.orderExtendLogistics.length>0){
              let list = res.data.orderExtendLogistics;
              list.map((item)=>{
                item.recordDate = this.formatTime(item.recordDate)
              })
              this.logisticsList = list;
            }
            this.logisticsList.unshift({
              logisticsDesc: "平台发货",
              recordDate: this.formatTime(res.data.sendTime)
            })
          }
        })
      },
      addExpress(){
        this.expressVisible=true;
      },
      handleAddExpressConfirm(){
        let tempExpress = this.express;
        if(tempExpress.exname==''||tempExpress.extime==''){
           this.$message({
            message: '信息不全，请补充',
            type: 'warning',
            duration:1500
          });
          return
        };
        let tempObj ={};
        tempObj.orderId= this.aorderId;
        tempObj.logisticsDesc=tempExpress.exname;
        tempObj.recordDate = tempExpress.extime;
        tempObj.status = 1;//1是显示，-1是隐藏
        setExpressInfo(tempObj).then(res=>{
          if(res.code ==200){
            this.$message({
              message: '新增成功',
              type: 'success',
              duration:1500
            });
            this.expressVisible = false;
            this.getExpressListFun();
          }
        })
      },
      emitInput(val) {
        this.$emit('input', val)
      },
      handleClose(){
        this.emitInput(false);
      }
    }
  }
</script>
<style></style>


